<script setup>
import { ref, onMounted, nextTick, onUnmounted, onDeactivated, onActivated, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import useUserStore from '@/stores/modules/user'
import { applyWithdrawRequest, getUserAccount, bindWeChat } from '@/api/jdb'
import { closeToast, showLoadingToast, showSuccessToast } from 'vant'
import { getSessionStorageItem, isWeChat } from '@/utils/common'

const userStore = useUserStore()
const router = useRouter()
const route = useRoute()

const noTixianMoney = ref(undefined)
const disableWithdraw = ref(false)

const goWithdrawHistory = () => {
  router.push('/withdraw-history')
}
const applyWithdraw = async () => {
  disableWithdraw.value = true
  const response = await applyWithdrawRequest().then(response => {

  }).finally(() => {
    disableWithdraw.value = false
  })
  const userAccountResponse = await getUserAccount({
    withdraw: 'Y'
  }).finally(() => closeToast())
  noTixianMoney.value = userAccountResponse.data.noTixianMoney
  showSuccessToast('操作成功')
}

const type = computed(() => {
  if (!!userStore.openId || !isWeChat()) {
    return 1
  }
  return 0
})

const bindWeChatOpenId = async () => {
  let openId = getSessionStorageItem("openId")
  await bindWeChat({openId}).then(response => {
    // console.log(response)
  })
  await userStore.getInfo()
}

const onClickLeft = () => {
  router.back()
}

const initUserInfo = async () => {
  const toast = showLoadingToast({
    message: '正在加载 ...',
    forbidClick: true,
    duration: 0
  })
  const userAccountResponse = await getUserAccount({
    withdraw: 'Y'
  }).finally(() => closeToast())
  noTixianMoney.value = userAccountResponse.data.noTixianMoney
}
initUserInfo()
</script>

<template>
  <van-nav-bar title="申请提现" left-arrow fixed placeholder @click-left="onClickLeft"/>
  <div class="clearfix">
    <van-button plain @click="goWithdrawHistory" type="primary" size="small" class="go-withdraw-btn">提现记录</van-button>
  </div>
  <div class="withdraw-amount">{{noTixianMoney}}</div>
  <div class="withdraw-desc">今日提现金额</div>
  <div class="apply-withdraw-container" v-if="type === 1">
    <van-button @click="applyWithdraw" block type="success" :disabled="disableWithdraw">申请提现</van-button>
  </div>
  <div class="withdraw-tips">
    温馨提示<br>
    1、提现审核时间1-2个工作日。<br>
    2、受微信限制，现每人每日提现单笔限额小于200元，单日总限额小于2000元，若超出限制，请明日再操作提现。<br>
    3、客服微信：18405319670。
  </div>
  <div class="apply-withdraw-container" v-if="type === 0">
    <van-button @click="bindWeChatOpenId" block type="success">您尚未绑定微信请点击绑定</van-button>
  </div>

</template>

<style scoped>
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
.go-withdraw-btn {
  float:right;
  margin-right:20px;
  margin-top: 20px;
}
.withdraw-amount {
  text-align: center;
  width: 100%;
  margin-top: 20px;
  color: #04be02;
  font-size:18px;
  font-weight:bold;
}
.withdraw-desc {
  margin-top: 20px;
  text-align: center;
  width: 100%;
  color: #04be02;
  font-size:18px;
  font-weight:bold
}
.apply-withdraw-container {
  width: 90%;
  margin: 20px auto 0;
}
.withdraw-tips {
  width: 90%;
  margin:10px auto 0;
  font-size:10px;
  line-height: 200%;
}
</style>
